<template>
  <div class="person" ref="person">
    <div>
      <div class="userHead">
        <img class="bg" src="http://a.tepin.hk/o/2018hwg/images/personcenter/headbg.png" alt="">
        <img class="head" :src="login?userInfo.headUrl:defaultHead" alt="">
        <div class="logined" v-if="login">
          <p>沙洲</p>
          <p>邀请码：123456789</p>
        </div>
        <div class="nologin" v-if="!login">
          <div class="btn" @click="goLogin">登录</div>
          <div class="btn">注册</div>
        </div>
      </div>
      <div class="title border-bottom">
        我的订单
        <div class="seeOrder" @click="jumpUrl('http://m.tepin.hk/shop/order/0.html')">查看我的订单<i class="el-icon-arrow-right"></i></div>
      </div>
      <div class="orderInfo">
        <div class="item" v-for="(item,index) of orderInfo" :key="index" @click="jumpUrl(item.h5_url)">
          <img :src="item.imgUrl" alt="">
          <p>{{item.title}}</p>
          <i v-if="item.num!=='0'">{{item.num}}</i>
        </div>
      </div>
      <div class="title border-bottom">
        我的服务
      </div>
      <div class="serveInfo">
        <div class="item" v-for="(item,index) of serverInfo" :key="index" @click="jumpUrl(item.h5_url)">
          <img :src="item.imgUrl" alt="">
          <p>{{item.title}}</p>
          <i v-if="item.num!=='0'">{{item.num}}</i>
        </div>
      </div>
    </div>
    <tabMenu></tabMenu>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import TabMenu from '@/components/tabMenu.vue'  
export default {
  name:'person',
  data(){
    return {
      login:false,
      defaultHead:"http://a.tepin.hk/o/2018hwg/images/personcenter/head.png",
      userInfo:{},
      orderInfo:[{'imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/order_ico1.png','title':'待付款','num':'0','h5_url':''},{'imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/order_ico2.png','title':'待发货','num':'12','h5_url':''},{'imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/order_ico3.png','title':'待收货','num':'6','h5_url':''},{'imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/order_ico4.png','title':'待评价','num':'99','h5_url':''}],
      serverInfo:[{'h5_url':'http://m.tepin.hk/shop/coupon/couponList.html?pageSize=10','title':'优惠券','imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/service_ico1.png'},{'h5_url':'http://a.tepin.hk/yx/H5/StoredCard/index','title':'储值卡','imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/service_ico2.png'},{'h5_url':'http://m.tepin.hk/shop/idCard/index.html','title':'身份证认证','imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/service_ico3.png'},{'h5_url':'http://m.tepin.hk/shop/address/findList.html','title':'我的地址','imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/service_ico4.png'},{'h5_url':'http://m.tepin.hk/shop/account/accountList.html','title':'我的账户','imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/service_ico5.png'},{'h5_url':'http://m.tepin.hk/shop/collect/collectList.html?pageSize=10','title':'我的收藏','imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/service_ico6.png'},{'h5_url':'http://m.tepin.hk/shop/comment/findList.html','title':'我的评论','imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/service_ico7.png'},{'h5_url':'http://m.tepin.hk/shop/help/list.html','title':'客户服务','imgUrl':'http://a.tepin.hk/o/2018hwg/images/personcenter/service_ico8.png'}]
    }
  },
  components:{
      TabMenu
  },
  props:{
       
  },
  created(){
    this.creatScroll()
  },
  mounted(){
    var user = JSON.parse(localStorage.getItem("youayun-user"));
    console.log(user)
    if(user){
      console.log(`有用户信息`)
      this.userInfo=user
      this.login=true
    }else{
      this.Firstfindlogin()
    }
  },
  methods:{
    creatScroll(){
      this.$nextTick(() => {
        if(!this.scroll){
          this.scroll=new BScroll(this.$refs.person,{scrollX: false,scrollY: true,click:true})
        }else{
          this.scroll.refresh()
        }
      })
    },
    goLogin(){
      var that=this
      var user = JSON.parse(localStorage.getItem("youayun-user"));
      if(user){
        console.log(`有用户信息2`)
        this.login=true
      }else{
        var findUser = function findUser() {
          var findOption = {
            'success': findSucess,
            "error": ex
          };
          object.findUser(findOption);
        };
        var findSucess = function findSucess(data) {
          console.log(`succ2`)
        };
        var ex = function ex(error, message, obj) {
          var loginOption = {
            'redirectUrl': window.location.href
          };
          object.login(loginOption);
        };
        var object = youayun({
          clientId: "haiwaigou",
          channel: "wap",
          skin: "haiwaigou-wap"
        });
        findUser();
      }
    },
    Firstfindlogin(){
      var that=this
      var findUser = function findUser() {
        var findOption = {
          'success': findSucess,
          "error": ex
        };
        object.findUser(findOption);
      };
      var findSucess = function findSucess(data) {
        console.log(`succ1`)
        that.login=true
      };
      var ex = function ex(error, message, obj) {
        // var loginOption = {
        //   'redirectUrl': window.location.href
        // };
        // object.login(loginOption);
      };
      var object = youayun({
        clientId: "haiwaigou",
        channel: "wap",
        skin: "haiwaigou-wap"
      });
      findUser();
    },
    jumpUrl(url){
      window.location.href=url
    }
  }
}

</script>

<style lang="stylus" scoped>
.person{width:100%;overflow:hidden;/*position:absolute;left:0;top:0;right:0;bottom:50px;*/background:#f8f8f8;}
.userHead{width:100%;overflow:hidden;position:relative;}
.userHead .bg{width:100%;}
.head{width:80px;height:80px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;}
.logined{width:100%;position:absolute;left:0;top:70%;}
.logined p{font-size:12px;color:#666;text-align:center;margin-top:10px;}
.logined p:nth-child(1){color:#333;font-size:14px;}
.nologin{width:36%;position:absolute;left:32%;top:160px;display: flex;flex-direction: row;align-items: center;justify-content:space-between;}
.nologin .btn{text-align:center;font-size:12px;padding:4px 16px;border:1px solid #7741cf;color:#7741cf;border-radius:10px;}

.title{padding:0 10px;height:40px;line-height:40px;font-size:14px;margin-top:10px;background:#fff;}
.title .seeOrder{display:inline-block;float:right;color:#999;}

.orderInfo{display: flex;flex-direction: row;align-items: center;justify-content:space-between;background:#fff;}
.orderInfo .item{flex:1;text-align:center;padding:10px 0;position:relative;}
.orderInfo .item img{margin:0 auto;height:25px;}
.orderInfo .item p{padding-top:5px;font-size:14px;color:#333;}
.orderInfo .item i{display:inline-block;position:absolute;top:3px;right:22px;background:#df4b53;color:#fff;font-size:12px;border-radius:50%;width:18px;height:18px;line-height:18px;text-align:center;}

.serveInfo{display: flex;flex-direction: row;align-items: center;justify-content:space-between;background:#fff;flex-wrap:wrap;}
.serveInfo .item{width:25%;text-align:center;padding:10px 0;position:relative;}
.serveInfo .item img{margin:0 auto;height:25px;}
.serveInfo .item p{padding-top:5px;font-size:14px;color:#333;}

</style>